<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <!-- <div class="indexTitle">项目管理</div> -->
                    <div class="contentsize">房间详情</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="addtitle">
                <div>详情</div>
                <div>
                    <el-button type="primary" @click="backForm">返回</el-button>
                </div>
            </div>
            <div class="detailcontent">
                <!-- scope.row.beginTime == null ? '' : scope.row.beginTime.trim().split(' ')[0] -->
                <div class="detailitem">区属名称：{{ projectdetail.qs }}</div>
                <div class="detailitem">房屋地址：{{ projectdetail.fwdz }}</div>
                <div class="detailitem">门号：{{ projectdetail.mh }}</div>
                <div class="detailitem">房间号：{{ projectdetail.fjh }}</div>
                <div class="detailitem">建筑面积：{{ projectdetail.jzmj }}</div>
                <div class="detailitem">产别：{{ projectdetail.cb }}</div>
                <div class="detailitem">权证类型：{{ projectdetail.qzlx }}</div>
                <div class="detailitem">计租面积：{{ projectdetail.jizumj }}</div>
                <div class="detailitem">房屋性质：{{ projectdetail.fwyt }}</div>
                <div class="detailitem">证书编号：{{ projectdetail.zsbh }}</div>
                <div class="detailitem">土地使用权面积：{{ projectdetail.tdsyqmj }}</div>
                <div class="detailitem">产权单位：{{ projectdetail.cqdw }}</div>
                <div class="detailitem">发证日期：{{ projectdetail.fzrq?projectdetail.fzrq.split(' ')[0]:'' }}</div>
                <div class="detailitem">土地使用权类型：{{ projectdetail.tdsyqlx }}</div>
                <div class="detailitem">总楼层：{{ projectdetail.zlc }}</div>
                <div class="detailitem">所在楼层：{{ projectdetail.lc }}</div>
                <div class="detailitem">档案编号：{{ projectdetail.dabh }}</div>
                <div class="detailitem">原值：{{ projectdetail.yz }}</div>
                <div class="detailitem">评估价格：{{ projectdetail.pgjg }}</div>
                <div class="detailitem">户型：{{ projectdetail.hx }}</div>
                <div class="detailitem">朝向：{{ projectdetail.cx }}</div>
                <div style="display: flex;margin-bottom: 24px;">
                    <div style="width: 100px;">
                        <el-checkbox label="自来水表" name="type" v-model="projectdetail.zlsb"></el-checkbox>
                    </div>
                    <div style="width: 100px;">
                        <el-checkbox label="电表" name="type" v-model="projectdetail.db"></el-checkbox>
                    </div>
                    <div style="width: 100px;">
                        <el-checkbox label="煤气表" name="type" v-model="projectdetail.mqb"></el-checkbox>
                    </div>
                    <div style="width: 100px;">
                        <el-checkbox label="物业费" name="type" v-model="projectdetail.wyf"></el-checkbox>
                    </div>
                    <div style="width: 100px;">
                        <el-checkbox label="供热" name="type" v-model="projectdetail.gr"></el-checkbox>
                    </div>
                    <div style="width: 100px;">
                        <el-checkbox label="中水水表" name="type" v-model="projectdetail.zssb"></el-checkbox>
                    </div>
                </div>
                <div class="detailitem1">备注：{{ projectdetail.note }}</div>
                <!-- <div class="detailitem"></div> -->
            </div>
            <div>附件</div>
            <div style="display:flex;margin-top: 20px;">
                <div style=" text-align: center;margin-right:10px;cursor: pointer;width: 100px;"
                    v-for="(item, index) in projectdetail.fj" :key="index" class="filebox">
                    <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px;"
                        @click="downloadfile(item.id, item.name, item.suffix)">
                    <div class="fileboxitem">{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { roomdetails, download } from '@/api/index';
import fileType from "../vo/filetype";
export default {
    name: 'detailfj',
    data() {
        return {
            form: {},
            projectdetail: {},
            fileList: [],
            fileType: fileType,
        };
    },
    methods: {
        // 返回上一页
        backForm() {
            this.$router.go(-1);
        },
        // 项目详情
        roomdetails(data) {
            roomdetails(data).then((res) => {
                this.projectdetail = res.data;
                this.projectdetail.zlsb == 'true' ? this.projectdetail.zlsb = true : this.projectdetail.zlsb = false
                this.projectdetail.db == 'true' ? this.projectdetail.db = true : this.projectdetail.db = false
                this.projectdetail.mqb == 'true' ? this.projectdetail.mqb = true : this.projectdetail.mqb = false
                this.projectdetail.wyf == 'true' ? this.projectdetail.wyf = true : this.projectdetail.wyf = false
                this.projectdetail.gr == 'true' ? this.projectdetail.gr = true : this.projectdetail.gr = false
                this.projectdetail.zssb == 'true' ? this.projectdetail.zssb = true : this.projectdetail.zssb = false
                console.log(this.projectdetail.fj)
            });
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
                // const blob = new Blob([res], {
                //     type: filetype
                // })
                // // const blob = res.data
                // const link = document.createElement('a')
                // const url = window.URL.createObjectURL(blob)
                // link.style.display = 'none'
                // link.href = url
                // link.setAttribute('download', name)
                // document.body.appendChild(link)
                // link.click()
                // document.body.removeChild(link)
            })
        }
    },
    mounted() {
        let data = {
            id: this.$route.params.id
        };
        this.roomdetails(data);
    }
};
</script>
<style></style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 100%;
    margin-bottom: 30px;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.filebox:hover .fileboxitem {
    color: #7090ff;
}
</style>